<template>
	<div class="login-container">
		<div class="container">
			<!-- logo -->
			<img class="logo" src="./logo.png" alt />

			<!-- 登录框-panel是bootstrap中的面板  -->
			<div class="panel panel-success">
				<div class="panel-heading">
					<h3 class="panel-title"></h3>
				</div>
				<div class="panel-body">
					<!-- 登录框表单 form-horizontal 是bootstrap中的水平方向的表单 -->
					<form id="login_form" class="form-horizontal">
						<div class="form-group">
							<div class="col-sm-12 item">
								<input
									type="text"
									class="form-control"
									id="username"
									name="username"
									required
									v-model="user.username"
									placeholder="请输入用户名"
								/>
								<!-- 用户图标 -->
								<i class="glyphicon glyphicon-user"></i>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12 item">
								<input
									type="password"
									class="form-control"
									id="password"
									name="password"
									required
									v-model="user.password"
									placeholder="请输入密码"
								/>
								<!-- 密码图标 -->
								<i class="glyphicon glyphicon-lock"></i>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<button type="button" id="login" class="btn btn-success btn-block" @click="handelLogin">登录</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import "bootstrap/dist/css/bootstrap.min.css";
	import "bootstrap/dist/js/bootstrap.min.js";
	import { login } from "@/api/login";
	//  引入store
	import storage from "@/utils/storage";
	export default {
		name: "loginIndex",
		data() {
			return {
				user: {
					username: "",
					password: ""
				}
			};
		},
		methods: {
			async handelLogin() {
				// 判断是否为空
				const loginReg = /^\w{4,6}$/;
				const username = this.user.username;
				const password = this.user.password;
				if (!loginReg.test(username) || !loginReg.test(password)) return;

				const usp = new URLSearchParams(this.user);

				const res = await login(usp.toString());
				if (res.data.code === 200) {
					// 把token存储到本地中
					storage.setToken("bbigEvents", res.data.token);
					layer.msg("登录成功!");
					this.$router.replace("/layout");
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	html,
	body {
		width: 100%;
		height: 100%;
		background-image: url(./login_bg.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.logo {
		margin-top: 10px;
	}

	.panel {
		width: 400px;
		height: 300px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -150px;
		margin-left: -200px;
	}

	.panel-heading {
		height: 60px;
		background: url(./login_title.png) no-repeat center;
	}
	.panel-success > .panel-heading {
		background-color: #ffffff;
	}

	.form-group {
		padding: 6px;
	}

	.item {
		position: relative;
	}

	.item input {
		text-indent: 20px;
	}

	.glyphicon-user,
	.glyphicon-lock {
		color: rgba(0, 0, 0, 0.4);
		position: absolute;
		padding: 10px 0px 0px 5px;
	}
</style>